<template>
  <div style="height: 100%; border-radius: 20px" @contextmenu.prevent.stop="globalClickRight($event)"
    @click="globalClickEvent">
    <rightMenuComponent :currentItemObj="currentActionInfo.currentItemInfo" :currentMultipleList="[]"
      class="rightMenuid" componentsFrom="share" :menuPosX="menuPosX" :menuPosY="menuPosY" :itemMenuShow="itemMenuShow"
      :globalRightMenuShow="globalRightMenuShow" :menuList="menuList" :shareUrl="fareurl" @refurbish="refurbish"
      @cancleShareContent="cancleShareContent" @calcleShareMember="calcleShareMember" @xiazaipptx="xiazaipptx"
      @xiazaipdf="xiazaipdf" @reName="reName" @deleteItem="deleteItem" @xiazaijpg="xiazaijpg">
    </rightMenuComponent>
    <!-- 头部 -->
    <div class="share_top" :style="{
      paddingLeft: OfficeGlobal.sharesharelimargin + 20 + 'px',
      paddingRight: OfficeGlobal.sharesharelimargin + 20 + 'px',
    }">
      <div class="left" style="width: 33.33%">
        <div class="dis-tool">
          <div class="one">
            <span class="switch switch-on" @click="changeDistype(3)" :style="{
              color: props.officeOwnershipType == 3 ? '#bfbfc0' : '#bfbfc0',
            }">已共享</span>
            <span class="switch switch-off" @click="changeDistype(4)" :style="{
              color: props.officeOwnershipType == 4 ? '#bfbfc0' : '#bfbfc0',
            }">已接收</span>
            <span :style="{ background: OfficeGlobal.shareshareTopThumb }" :class="
              props.officeOwnershipType == 4
                ? 'switch-thumb transition-200ms'
                : 'switch-thumb'
            "></span>
          </div>
        </div>
      </div>
      <div class="center" style="width: 33.33%" @contextmenu.prevent.stop>
        <div class="center_title" style="display: none" :style="{
          color: OfficeGlobal.shareshareToptitlecolor
            ? OfficeGlobal.shareshareToptitlecolor
            : '#000',
          fontSize: OfficeGlobal.shareshareToptitlesize
            ? OfficeGlobal.shareshareToptitlesize
            : '18px',
        }">
          共{{ dataList.length }}条数据
        </div>
      </div>
      <div class="right" style="width: auto">
        <div class="right_tool" v-if="show || searchValue.length > 0">
          <!-- 搜索 -->
          <div class="sousuoxin">
            <input autocomplete="off" id="sousuoinp" class="shareTopinp" :class="sousuo ? 'inpxin' : ''"
              v-model="searchValue" placeholder="搜索项目名称" />
            <div class="searchclass" @click="sousuoFn" :style="{
              background: sousuo
                ? OfficeGlobal.shareshareTopshousuo
                  ? OfficeGlobal.shareshareTopshousuo
                  : '#686CE8'
                : '',
              fontSize: OfficeGlobal.shareshareTopiconsize
                ? OfficeGlobal.shareshareTopiconsize + 'px'
                : '18px',
              borderRadius: sousuo ? '0 21px 21px 21px' : '',
            }">
              <i class="appIcon-iconfont appIcon-sousuo-xin" :style="{
                fontSize: OfficeGlobal.shareshareTopiconsize
                  ? OfficeGlobal.shareshareTopiconsize + 'px'
                  : '18px',
                color: sousuo ? '#ffffff' : '',
              }"></i>
            </div>
          </div>
          <!-- <div class="sousuoxin" @contextmenu.prevent.stop>
            <input autocomplete='off' id="sousuoinp" class="shareTopinp" :class="sousuo ? 'inpxin' : ''"
              v-model="searchValue" placeholder="搜索项目名称" />
            <div class="searchclass" @click="sousuoFn" :style="{
              background: sousuo ? props.shareTopshousuo ? props.shareTopshousuo : '#686CE8' : '',
              color: sousuo ? '#ffffff' : '',
              fontSize: props.shareshareTopiconsize ? props.shareshareTopiconsize : '21px',
              borderRadius: sousuo ? '0 21px 21px 21px' : ''
            }">
              <i class="appIcon-iconfont appIcon-sousuo-xin"></i>
            </div>
          </div> -->
          <!-- 列表切换 -->
          <div class="list_chart" @contextmenu.prevent.stop @click="changetype(1)"
            v-if="type == 1 && OfficeGlobal.sharelistswitch" :style="{
              color: OfficeGlobal.shareshareTopiconcolor
                ? OfficeGlobal.shareshareTopiconcolor
                : '#000',
              fontSize: OfficeGlobal.shareshareTopiconsize
                ? OfficeGlobal.shareshareTopiconsize
                : '16px',
            }">
            <i class="appIcon-iconfont appIcon-liebiao title"></i>
          </div>
          <div @contextmenu.prevent.stop class="list_chart" @click="changetype(2)"
            v-if="type == 2 && OfficeGlobal.sharelistswitch" :style="{
              color: OfficeGlobal.shareshareTopiconcolor
                ? OfficeGlobal.shareshareTopiconcolor
                : '#000',
              fontSize: OfficeGlobal.shareshareTopiconsize
                ? OfficeGlobal.shareshareTopiconsize
                : '16px',
            }">
            <i class="appIcon-iconfont appIcon-kapianmoshi title"></i>
          </div>
          <!-- 排序 -->
          <div class="list_chart" @contextmenu.prevent.stop>
            <i v-if="officeSortRule == 3" class="appIcon-iconfont appIcon-paixu title" :style="{
              fontSize: OfficeGlobal.shareshareTopiconsize
                ? OfficeGlobal.shareshareTopiconsize + 'px'
                : '18px',
            }"></i>
            <i v-if="officeSortRule == 1 && officeSortType == 1"
              class="appIcon-iconfont appIcon-chuangjianshijianzhengxu title" :style="{
                fontSize: OfficeGlobal.shareshareTopiconsize
                  ? OfficeGlobal.shareshareTopiconsize + 'px'
                  : '18px',
              }"></i>
            <i v-if="officeSortRule == 1 && officeSortType == 2"
              class="appIcon-iconfont appIcon-chuangjianshijiandaoxu title" :style="{
                fontSize: OfficeGlobal.shareshareTopiconsize
                  ? OfficeGlobal.shareshareTopiconsize + 'px'
                  : '18px',
              }"></i>
            <i v-if="officeSortRule == 2 && officeSortType == 1"
              class="appIcon-iconfont appIcon-xiugaishijianzhengxu title" :style="{
                fontSize: OfficeGlobal.shareshareTopiconsize
                  ? OfficeGlobal.shareshareTopiconsize + 'px'
                  : '18px',
              }"></i>
            <i v-if="officeSortRule == 2 && officeSortType == 2"
              class="appIcon-iconfont appIcon-xiugaishijiandaoxu title" :style="{
                fontSize: OfficeGlobal.shareshareTopiconsize
                  ? OfficeGlobal.shareshareTopiconsize + 'px'
                  : '18px',
              }"></i>
            <i v-if="officeSortRule == 4 && officeSortType == 1"
              class="appIcon-iconfont appIcon-biaotimingchengzhengxu title" :style="{
                fontSize: OfficeGlobal.shareshareTopiconsize
                  ? OfficeGlobal.shareshareTopiconsize + 'px'
                  : '18px',
              }"></i>
            <i v-if="officeSortRule == 4 && officeSortType == 2"
              class="appIcon-iconfont appIcon-biaotimingchengdaoxu title" :style="{
                fontSize: OfficeGlobal.shareshareTopiconsize
                  ? OfficeGlobal.shareshareTopiconsize + 'px'
                  : '18px',
              }"></i>
            <div class="toolpaixu">
              <ul class="toolpaixuul">
                <li class="toolpaixuli" :style="{
                  color: item.index === officeSortRule ? '#4355DC' : '#fff',
                }" v-for="(item, index) in paixulistData" :key="index" @click="paixuFn(item)">
                  <dd>{{ item.item }}</dd>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图表模式 -->
    <div class="share_classlist" v-if="type == 1 && show">
      <ul>
        <!-- {{ dataList.value }} -->
        <!--    `animate__animated animate__fadeInUp animate__delay-0${index % 5}s`, -->
        <!-- currentMultipleList.map(val => { return val.officeContentId }).includes(item.officeContentId) ? 'multiple_select' : '' -->
        <li v-for="(item, index) in dataList" :key="index" :class="[]" :style="{
          margin: OfficeGlobal.sharesharelimargin
            ? OfficeGlobal.sharesharelimargin + 'px'
            : '20px',
          width: imgwidth + 'px',
        }" @contextmenu.prevent.stop="itemClickRight($event, item)" @click="cardItemCilck(item)">
          <!-- :style="`background:${item.params.bgColor}`" -->
          <div class="box conentbox" :style="`height: ${height}px`">
            <img @error="imgLoadError($event, item)" v-lazy="
              item.officeThumbnailContent == null
                ? ''
                : item.officeThumbnailContent
            " v-if="item.officeThumbnailContent"
              @click.self="toDetail(item.officeId, '1', item.officeTitle, item)" />
            <!-- <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656057159&t=3cefdb8ba0f20137c6c46b3e7177c507"
              v-else @click.self="toDetail(item.officeContentId, '0', item.officeTitle)" /> -->
            <div class="bianji" @click.stop="toDetail(item.officeId, '0', item.officeTitle, item)">
              <i class="appIcon-iconfont appIcon-bianji-xin"></i>
            </div>
            <slot name="shareimgAnniu">
              <!-- <div class="view" v-if="props.shareshareppt">
                <dd @click="toDetail(item.officeContentId, '1')">
                  <i class="appIcon-iconfont appIcon-anliyulan"></i>
                </dd>
              </div> -->
              <!-- <div class="edit" v-if="props.shareshareppt">
                <dd>
                  <i class="appIcon-iconfont appIcon-gengduo1 color_a8b5d7"></i>
                </dd>
              </div> -->
            </slot>
            <!-- ppt小人图上 -->
            <dl class="head_imgportrait" v-if="
              item.ownerSharerList &&
              !OfficeGlobal.shareshareppt &&
              props.officeOwnershipType == 3
            " @click="shareMember(item)">
              <!-- {{item.ownerSharerList.length}} -->
              <span v-for="(sub_item, sub_index) in item.ownerSharerList.length > 5
              ? item.ownerSharerList.slice(0, 5)
              : item.ownerSharerList" :key="sub_index">
                <img :src="sub_item.userAvatar" alt="" />
              </span>
              <!-- 超过5个时显示 -->
              <div v-if="item.ownerSharerList.length > 5" class="head_mask"
                :style="{ 'z-index': item.ownerSharerList.length + 1 }">
                +{{ item.ownerSharerList.length - 5 }}
              </div>
            </dl>
            <!-- 已接收 -->
            <dl class="head_imgportrait" v-if="
              !OfficeGlobal.shareshareppt && props.officeOwnershipType == 4
            ">
              <div class="yijieshou">
                <div class="left">
                  <img :src="item.custodianByAvatar" alt="" />
                </div>
                <div class="right">
                  <div class="top">分享者</div>
                  <div class="bottom" style="color: #92a1b7">
                    {{ item.custodianByNickName }}
                  </div>
                </div>
              </div>
            </dl>
            <!-- <div class="mask" @click.self="toDetail(item.officeContentId, '0')"></div> -->
          </div>
          <!-- 编辑名字 -->
          <dl class="name_inp" :style="{ justifyContent: OfficeGlobal.sharetitlejustifyContent }">
            <input v-if="npmeInp == 'inpname_' + item.officeId" :id="'inpname_' + item.officeId" class="name_inp_inp"
              v-model="item.officeTitle" @blur="editTitle(item)" @focus="focusTitle(item)" maxlength="10" :style="{
                fontSize: OfficeGlobal.sharesharetitlefontsize,
                color: '#000',
              }" />
            <span v-else @click="textFocus(item.officeId)" class="inp_span" :style="{
              fontSize: OfficeGlobal.sharesharetitlefontsize,
              color: OfficeGlobal.sharesharetitlecolor,
            }">{{ item.officeTitle }}</span>
            <i v-if="npmeInp == null && props.officeOwnershipType == 3"
              class="appIcon-iconfont appIcon-bianji icon-zhongmingming" @click="textFocus(item.officeId)"
              :style="{ fontSize: OfficeGlobal.sharesharetitleiconfz }"></i>
          </dl>
          <!-- 小人在下面 -->
          <dl class="head_portrait" v-if="
            item.ownerSharerList &&
            OfficeGlobal.shareshareppt &&
            props.officeOwnershipType == 3
          " @click="shareMember(item)">
            <span v-for="(sub_item, sub_index) in item.ownerSharerList.length > 5
            ? item.ownerSharerList.slice(0, 5)
            : item.ownerSharerList" :key="sub_index">
              <img :src="sub_item.userAvatar" alt="" />
            </span>
            <!-- 超过5个时显示 -->
            <div v-if="item.ownerSharerList.length > 5" class="head_mask"
              :style="{ 'z-index': item.ownerSharerList.length + 1 }">
              +{{ item.ownerSharerList.length - 5 }}
            </div>
            <!-- <slot name="shareJiahao">
              <div class="new_distribution" v-if="props.officeOwnershipType == 3" @click="shareMember(item)">
                <i class="appIcon-iconfont appIcon-tianjia"></i>
              </div>
            </slot> -->
          </dl>
          <!-- 已接收 -->
          <dl class="head_portrait" v-if="OfficeGlobal.shareshareppt && props.officeOwnershipType == 4">
            <div class="yijieshou">
              <div class="left">
                <img :src="item.custodianByAvatar" alt="" />
              </div>
              <div class="right">
                <div class="top">分享者</div>
                <div class="bottom" style="color: #92a1b7">
                  {{ item.custodianByNickName }}
                </div>
              </div>
            </div>
          </dl>
        </li>
      </ul>
    </div>
    <!-- 列表模式 -->
    <div class="share_classlist2" v-if="type == 2 && show">
      <ul>
        <li v-for="(item, index) in dataList" :key="index" :class="`animate__animated animate__fadeInUp animate__delay-0${
          index % 10
        }s`" @contextmenu.prevent.stop="itemClickRight($event, item)">
          <div class="left">
            <div class="box" @click.stop="cardItemCilck(item)">
              <img @error="imgLoadError($event, item)" style="box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1)" v-lazy="
                item.officeThumbnailContent == null
                  ? ''
                  : item.officeThumbnailContent
              " @click.stop="
                  toDetail(item.officeId, '1', item.officeTitle, item)
                " />
              <!-- <img style="box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);" src="@/assets/images/card_default.png" v-else
                @click.stop="toDetail(item.officeId, '1', item.officeTitle,item)" /> -->
              <!-- <p @click="toDetail(item.officeContentId,'0')">{{item.title}}</p> -->
              <dl class="name_inp">
                <input v-if="npmeInp == 'inpname_type_' + item.officeId" :id="'inpname_type_' + item.officeId"
                  class="name_inp_inp" @focus="focusTitle(item)" @blur="editTitle(item)" v-model="item.officeTitle"
                  maxlength="10" :style="{
                    fontSize: OfficeGlobal.sharesharetitlefontsize,
                    color: '#000',
                  }" />
                <span v-else @click="textFocus(item.officeId)" class="inp_span" :style="{
                  fontSize: OfficeGlobal.sharesharetitlefontsize,
                  color: OfficeGlobal.sharesharetitlecolor,
                }">{{ item.officeTitle }}</span>
                <i v-if="npmeInp == null && props.officeOwnershipType == 3"
                  class="appIcon-iconfont appIcon-bianji icon-zhongmingming" @click="textFocus(item.officeId)"
                  :style="{ fontSize: OfficeGlobal.sharesharetitleiconfz }"></i>
              </dl>
            </div>
          </div>
          <div class="center" @click.self="toDetail(item.officeId, '1', item.officeTitle, item)">
            <!-- 已分享人员列表 -->
            <dl class="head_portrait" @click="shareMember(item)"
              v-if="item.ownerSharerList && props.officeOwnershipType == 3">
              <div class="sharelist">
                <span v-for="(sub_item, sub_index) in item.ownerSharerList.length >
                                  5
                ? item.ownerSharerList.slice(0, 5)
                : item.ownerSharerList" :key="sub_index">
                  <img :src="sub_item.userAvatar" alt="" />
                </span>
                <!-- 超过5个时显示 -->
                <div v-if="item.ownerSharerList.length > 5" class="head_mask">
                  +{{ item.ownerSharerList.length - 5 }}
                </div>
              </div>
            </dl>
            <!-- 已接收人员列表 -->
            <dl class="receivelist" v-if="props.officeOwnershipType == 4">
              <div>
                <div class="listyijieshou">
                  <div class="left">
                    <img :src="item.custodianByAvatar" alt="" />
                  </div>
                  <div class="share" style="color: #92a1b7">
                    分享者：{{ item.custodianByNickName }}
                  </div>
                </div>
              </div>
            </dl>
          </div>
          <div class="right">
            <div class="bianji" @click.stop="toDetail(item.officeId, '0', item.officeTitle, item)">
              <i class="appIcon-iconfont appIcon-bianji-xin"></i>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 无数据时显示 -->
    <div class="sharenone" v-if="!show" @contextmenu.prevent.stop="
      (itemMenuShow = false), (globalRightMenuShow = false)
    ">
      <div class="fenxiangnone" v-if="props.officeOwnershipType == 3">
        暂无协作内容
      </div>
      <div class="jieshounone" v-if="props.officeOwnershipType == 4">
        暂无接收内容
      </div>
    </div>
  </div>

  <DelVue :delshow="delshow" @shanchu="shanchuFn" :deltexttitle="warringText"></DelVue>
  <!-- @rowClick="rowClick"  -->
  <memberSelect :comefrom="'home'" :visible="membersShow" @closeVisible="closeVisible"
    :currentItemProps="currentActionInfo.currentItemInfo"></memberSelect>
</template>

<script lang="ts" setup>
import {
  reactive,
  watch,
  onMounted,
  ref,
  nextTick,
  defineEmits,
  defineProps,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { copyText, readClipboard } from "./clipboard";
import rightMenuComponent from "../OfficeRightMenu/rightMenu.vue";
import memberSelect from "../officeMemberShare/memberSelect.vue";
import OfficeGlobal from "@/utils/officeglobal";
import DelVue from "../OfficeShare/Del.vue";
import useExport from "@/hooks/useExport";
// import defaultImg from "@/assets/images/card_default.png";
import {
  getShareOfficeList,
  editSpaceOffice,
  deleteContent,
} from "@/api/content";
import { doCancleShare } from "@/api/share";
import request from "@/utils/axios";
import { Log } from "@icon-park/vue-next";
const warringText = ref(""); //删除提示文案
const emits = defineEmits([
  "jinrubianji",
  "changeofficeOwnershipType",
  "paixurule", // 父级判断采用何种排序规则
  "officeFileType", //类型：1：文件夹；2：文件；3：标签
  "xiazaipptx",
  "xiazaipdfx",
  "xiazaijpg",
  "toEditPage", // 切换已接收已派发
]);
const props: any = defineProps([
  "officeOwnershipType", // 已分享或已接收 (必传)
  "shareToptitlecolor",
  "url",
]);
const { exporting, exportJSON, exportPPTX, htmlToImage } = useExport(); // 下载pptx

const officeFileType = ref(props.officeFileType || 2); // 文件类型 1:文件夹 2:文件
const searchValue = ref(""); // 搜索框内容
const paixulistData = [
  { item: "创建时间", index: 1 },
  { item: "修改时间", index: 2 },
  { item: "名称排序", index: 4 },
];
// { item: '自定义排序', index: 3 }
const officeSortRule = ref(2); // 排序规则
const officeSortType = ref(2); // 排序类型
const listnumber = ref(); // 接收分享成员数据

const router = useRouter();
const show = ref<boolean>(true); // 判断有无数据
let dataList: any = ref([]); // 数据存放
let dataListcopy: any = ref([]); // 数据存放
const sousuo = ref<boolean>(false); // 是否显示搜索框
const type = ref(1); // 判断列表展示模式 1 图标模式 2 列表模式
const npmeInp = ref<any>(null); // 判断是否点击重命名
let height = ref(); // 默认高度
const imgwidth = ref(); // 默认宽度
const morevisible = ref<boolean>(false); // 点击按钮后关闭弹出层
// const list = reactive([a, b, c, d, e, f, g])  // 假数据
const itemTitle = ref<any>(""); // 标题名字暂存 标题为空时显示原名称
const itemright = ref(); // 右键暂存对象
const delshow = ref(false); // 删除弹窗显示
const fareurl = ref(""); // 链接地址
const isUrlCopied = ref(false); //分享链接地址是否已拷贝
const currentActionInfo: any = reactive({
  currentItemInfo: {},
});
const currentMultipleList: any = reactive([]);

const menuType = ref("global"); //右键菜单类型 global全局   moreselect多选全选  listitem 单个列表项
const membersShow = ref(false); //显示分享人员滑块儿
const ctrlDown = ref(false); //ctrl或command 是否被按下
// 右键菜单属性
const menuPosX: any = ref(0); //右键菜单水平位置
const menuPosY: any = ref(0); //右键菜单垂直位置
const globalRightMenuShow = ref(false); // 全局的右键菜单显示
const itemMenuShow = ref(false); // 列表或者卡片的右键菜单显示

// 页面加载获取列表计算宽高
onMounted(async () => {
  await getDataList();
  getBoxHeight();
  window.addEventListener("resize", () => {
    type.value === 1 ? getBoxHeight() : "";
  });
});
// 获取数据
const getDataList = () => {
  const params = {
    form: {
      officeFileType: officeFileType.value, // 文件类型：1：文件夹；2：文件；
      officeOwnershipType: props.officeOwnershipType, // 所有权：-1 全部（默认）；1私有的；2共享的；3：我共享的；4：共享给我的;
      officeParentId: -1, // 父级ID；'-1'查询所有，'0'查询根目录；
      officeSortRule: officeSortRule.value, // 排序规则：1：创建时间；2：修改时间；3：自定义排序；4：名称排序
      officeSortType: officeSortType.value, // 排序类型：1 正序；2 倒叙；
      officeTitle: searchValue.value, // 标题
      officeType: OfficeGlobal.officeType, // 应用类型：1：笔记；2：思维导图；3：流程图；4：PPT；5：技能树；6：自由编辑器
    },
    size: 10000,
  };
  getShareOfficeList(params).then((res: any) => {
    if (res.data.data.total == 0) {
      show.value = false;
      membersShow.value = false;
    } else {
      dataList.value = res.data.data.records;
      dataListcopy.value = res.data.data.records;
      membersShow.value = false;
      show.value = true;
    }
  });
};

const imgLoadError = (e: any, info: any) => {
  // info.officeThumbnailContent = defaultImg;
};
// 右键菜单列表
const menuList: any = reactive({
  globalMenu: [
    {
      title: "刷新",
      eventName: "refurbish",
      eventEmitParent: true,
      id: 1,
    },
  ],
  listItemMenu: [
    {
      title: "取消共享",
      eventName: "cancleShareContent",
      eventEmitParent: true,
      subMenuType: "",
      isShow: true,
      id: 1,
    },
    {
      title: "分享链接",
      eventName: "",
      subMenuType: "shareLink",
      eventEmitParent: true,
      isShow: true,
      id: 2,
    },
    {
      title: "下载",
      eventName: "",
      eventEmitParent: true,
      subMenuType: "download",
      isShow: true,
      subMenu: [
        {
          title: "导出 PPTX",
          eventName: "xiazaipptx",
          eventEmitParent: true,
        },
        // {
        //   title: '导出pdf',
        //   eventName: 'xiazaipdf',
        //   eventEmitParent: true,
        // },
        // {
        //   title: '导出图片',
        //   eventName: 'xiazaijpg',
        //   eventEmitParent: true,
        // }
      ],
      id: 4,
    },
    {
      title: "重命名",
      eventName: "reName",
      subMenuType: "",
      eventEmitParent: true,
      isShow: true,
      id: 6,
    },
    {
      title: "删除",
      eventName: "deleteItem",
      subMenuType: "",
      eventEmitParent: true,
      isShow: true,
      id: 7,
    },
  ],
  moreSelectMenu: [],
});

const hideRightMenu = () => {
  itemMenuShow.value = false;
  globalRightMenuShow.value = false;
};
defineExpose({ hideRightMenu });
// 计算图高度
const getBoxHeight = () => {
  const div: any = document.querySelector(".share_classlist>ul");
  const widthlist = div.clientWidth || div.offsetWidth || div.scrollWidth;
  imgwidth.value =
    widthlist / OfficeGlobal.sharesharelinumber -
    OfficeGlobal.sharesharelimargin -
    OfficeGlobal.sharesharelimargin;
  height.value = imgwidth.value * OfficeGlobal.shareshareproportion;
};

// 排序方法   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
const paixuFn = (item: any) => {
  officeSortRule.value = item.index;
  if (officeSortType.value == 1) {
    officeSortType.value = 2;
  } else {
    officeSortType.value = 1;
  }
  getDataList();
};
// 已派发已接收--切换
const changeDistype = (i: number) => {
  emits("changeofficeOwnershipType", i);

  // const shareMenu1 =
  // const shareMenu =
  //   {
  //   title: '取消共享',
  //   eventName: 'cancleShareContent',
  //   eventEmitParent: true,
  //   subMenuType: '',
  //   isShow: true,
  //   id: 1
  //   }

  // const chancleShare = {
  //   title: '退出共享',
  //   eventName: 'calcleShareMember',
  //   eventEmitParent: true,
  //   subMenuType: '',
  //   isShow: true,
  //   id: 11
  // }
  if (i == 3) {
    // 已共享
    menuList.listItemMenu = [
      {
        title: "取消共享",
        eventName: "cancleShareContent",
        eventEmitParent: true,
        subMenuType: "",
        isShow: true,
        id: 1,
      },
      {
        title: "分享链接",
        eventName: "",
        subMenuType: "shareLink",
        eventEmitParent: true,
        isShow: true,
        id: 2,
      },
      {
        title: "下载",
        eventName: "",
        eventEmitParent: true,
        subMenuType: "download",
        isShow: true,
        subMenu: [
          {
            title: "导出 PPTX",
            eventName: "xiazaipptx",
            eventEmitParent: true,
          },
          {
            title: "导出图片",
            eventName: "xiazaijpg",
            eventEmitParent: true,
          },
        ],
        id: 4,
      },
      {
        title: "重命名",
        eventName: "reName",
        subMenuType: "",
        eventEmitParent: true,
        isShow: true,
        id: 6,
      },
      {
        title: "删除",
        eventName: "deleteItem",
        subMenuType: "",
        eventEmitParent: true,
        isShow: true,
        id: 7,
      },
    ];
  } else {
    //已接受
    menuList.listItemMenu = [
      {
        title: "退出共享",
        eventName: "calcleShareMember",
        eventEmitParent: true,
        subMenuType: "",
        isShow: true,
        id: 11,
      },
      {
        title: "分享链接",
        eventName: "",
        subMenuType: "shareLink",
        eventEmitParent: true,
        isShow: true,
        id: 2,
      },
      // {
      //   title: '下载',
      //   eventName: '',
      //   eventEmitParent: true,
      //   subMenuType: 'download',
      //   isShow: true,
      //   subMenu: [
      //     {
      //       title: '导出 PPTX',
      //       eventName: 'xiazaipptx',
      //       eventEmitParent: true,
      //     },
      //     {
      //       title: '导出图片',
      //       eventName: 'xiazaijpg',
      //       eventEmitParent: true,
      //     }
      //   ],
      //   id: 4
      // }
    ];
  }
};
// 点击搜索事件
const sousuoFn = (event: any) => {
  sousuo.value = !sousuo.value;
  if (sousuo.value) {
    document.getElementById("sousuoinp")?.focus();
  } else {
    searchValue.value = "";
  }
};
// 监听搜索事件,进行搜索请求
watch(
  () => searchValue.value,
  (newValue, oldValue) => {
    if (newValue) {
      dataList.value = dataListcopy.value;
      dataList.value = dataList.value.filter((item: any) => {
        return item.officeTitle.indexOf(newValue) != -1;
      });
    } else {
      dataList.value = dataListcopy.value;
    }
    // getDataList()
  }
);
// 监听已分享已接收切换
watch(
  () => props.officeOwnershipType,
  async (newValue, oldValue) => {
    dataList.value = [];
    await getDataList();
  }
);

// 最外层右键事件
const globalClickRight = (e: any) => {
  if (dataList.value.length) {
    let menuNum = document.querySelectorAll(
      ".rightMenuid>.global_menu>ul>li"
    ).length;
    let menuHeight = menuNum * 40 + 30;
    let windowHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    menuPosX.value = e.pageX;
    menuPosY.value =
      windowHeight - e.pageY < menuHeight ? windowHeight - menuHeight : e.pageY;
    itemMenuShow.value = false;
    globalRightMenuShow.value = true;
  }
};

// 关闭分享人员列表滑块儿
const closeVisible = (flag: any) => {
  if (flag) {
    getDataList();
  } else {
    membersShow.value = false;
  }
};
// 重命名
const reName = () => {
  itemMenuShow.value = false;
  textFocus(currentActionInfo.currentItemInfo.officeId);
};
// 取消共享
const calcleShareMember = () => {
  let params = {
    officeId: currentActionInfo.currentItemInfo.officeId,
  };
  doCancleShare(params).then((res: any) => {
    itemMenuShow.value = false;
    getDataList();
  });
};
// 取消分享
const cancleShareContent = () => {
  calcleShareMember();
};
// 点击出现分享成员弹窗
const shareMember = (item: any) => {
  if (props.officeOwnershipType == 3) {
    currentActionInfo.currentItemInfo = item;
    membersShow.value = true;
  }
};

// 列表卡片右键事件
const itemClickRight = (e: any, item: any) => {
  if (dataList.value.length) {
    let menuNum = document.querySelectorAll(
      ".rightMenuid>.item_menu>ul>li"
    ).length;
    let menuHeight = menuNum * 40 + 30;
    let windowHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    currentActionInfo.currentItemInfo = item;
    menuPosX.value = e.pageX;
    menuPosY.value =
      windowHeight - e.pageY < menuHeight ? windowHeight - menuHeight : e.pageY;
    itemMenuShow.value = true;
    itemright.value = item;
    //  获取URL地址
    const url = `${window.location.origin}/freeeditor/#/freeeditor?wid=${currentActionInfo.currentItemInfo.officeId}&screen=1`;
    fareurl.value = url;
  }
};

// 右键菜单事件
// 粘贴事件
const paste = () => {};
// 右键刷新事件
const refurbish = () => {
  globalRightMenuShow.value = false;
  getDataList();
};

// 复制文件
const copyFile = () => {};

const cancleShare = () => {};

// 点击分享链接  --  出现分享链接弹窗
const rightfensiang = () => {
  isUrlCopied.value = true;
  // 方法 点击分享弹窗里面的复制进行复制 全部拷贝!!!!!!!!!!!!!!
  copyText(fareurl.value).then((res: any) => {});
  // 方法  全部拷贝!!!!!!!!!!!!!!
};
// 导出pptx
const xiazaipptx = () => {
  exportPPTX();
};
// 导出pdfx
const xiazaipdf = () => {
  emits("xiazaipdfx", itemright);
};
// 导出jpg   没方法!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! itemright全部对象
const xiazaijpg = () => {
  emits("xiazaijpg", itemright);
};
// 定义参数
const page = reactive({
  current: 1,
  size: 1000,
});
const globalClickEvent = () => {
  itemMenuShow.value = false;
  globalRightMenuShow.value = false;
};
// 删除对话框的确认回调
const shanchuFn = (flag: any) => {
  if (flag) {
    let params = {
      officeId: currentActionInfo.currentItemInfo.officeId,
    };
    deleteContent(params).then((res: any) => {
      delshow.value = false;
      getDataList();
    });
  } else {
    delshow.value = false;
  }
};
// 删除一个
const deleteItem = () => {
  itemMenuShow.value = false;
  warringText.value = "确定删除当前分享内容吗？";
  delshow.value = true;
};

// 切换列表视图
const changetype = (val: number) => {
  val === 1 ? (type.value = 2) : (type.value = 1);
  // type.value === 2 ? getBoxHeight() : ''
};
// 点击进入编辑
const toDetail = (id: string, screen: string, name: any, item: any) => {
  emits("toEditPage", {
    officeTitle: name.value,
    officeId: id,
    screen: screen,
    item: item,
  });
  // router.push({
  //   path: '/freeeditor',
  //   query: {
  //     wid: id,
  //     name: name
  //   }
  // })
  // emits('jinrubianji', id, screen, name)
};
// 删除事件  出现删除弹窗
// const deleteitem = () => {
//   delshow.value = true
// }
// 聚焦事件
const focusTitle = (item: any) => {
  itemTitle.value = item.officeTitle;
};
// 失焦事件
const editTitle = (item: any) => {
  npmeInp.value = null;
  if (item.officeTitle == itemTitle.value) {
    return;
    // console.log(item.officeTitle, "第一个", itemTitle.value);
  } else {
    if (item.officeTitle === "") {
      let params = {
        officeId: item.officeId,
        officeTitle: itemTitle.value,
      };
      editSpaceOffice(params).then((res: any) => {
        getDataList();
      });
    } else {
      let params = {
        officeId: item.officeId,
        officeTitle: item.officeTitle,
      };
      editSpaceOffice(params).then((res: any) => {
        getDataList();
      });
    }
  }
};
// 点击名字重命名
const textFocus = (item: any) => {
  if (props.officeOwnershipType === 4) return;
  if (item == "youji") {
    if (type.value === 1) {
      npmeInp.value = "inpname_" + itemright.value.hhxsChartId;
      nextTick(() => {
        document
          .getElementById("inpname_" + itemright.value.hhxsChartId)
          ?.focus();
        morevisible.value = false;
      });
    } else {
      npmeInp.value = "inpname_type_" + itemright.value.hhxsChartId;
      nextTick(() => {
        document
          .getElementById("inpname_type_" + itemright.value.hhxsChartId)
          ?.focus();
        morevisible.value = false;
      });
    }
  } else {
    if (type.value === 1) {
      npmeInp.value = "inpname_" + item;
      nextTick(() => {
        document.getElementById("inpname_" + item)?.focus();
        morevisible.value = false;
      });
    } else {
      npmeInp.value = "inpname_type_" + item;
      nextTick(() => {
        document.getElementById("inpname_type_" + item)?.focus();
        morevisible.value = false;
      });
    }
  }
};

onMounted(() => {
  // 监听键盘事件
  document.addEventListener("keydown", (event) => {
    //  || arguments.callee.caller.arguments[0]
    let e = event || window.event;
    // 按下ctrl或command
    if ((e && e.keyCode == 17) || e.keyCode == 91) {
      ctrlDown.value = true;
    }
  });
  // 监听松开键盘事件
  document.addEventListener("keyup", (event) => {
    let e = event || window.event;
    // ctrl或command 松开
    if ((e && e.keyCode == 17) || e.keyCode == 91) {
      // enter 键
      ctrlDown.value = false;
    }
  });
});

// 卡片单击事件
const cardItemCilck = (item: any) => {
  if (ctrlDown.value) {
    if (
      currentMultipleList.findIndex(
        (citem: any) => citem.officeContentId == item.officeContentId
      ) == -1
    ) {
      currentMultipleList.push(...[item]);
    } else {
      currentMultipleList.splice(
        currentMultipleList.findIndex(
          (citem: any) => citem.officeContentId == item.officeContentId
        ),
        1
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.share_top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    .dis-tool {
      width: 200px;
      height: 42px;
      background: #1b1e23;
      box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      // margin-left: 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      .one {
        display: flex;
        position: relative;
        height: 42px;
        align-items: center;

        .switch {
          width: 100px;
          display: inline-block;
          z-index: 1;
          transition: all 0.5s;
          cursor: pointer;
          text-align: center;
        }

        .switch-thumb {
          position: absolute;
          width: 97px;
          left: 0;
          height: 36px;
          transition: all 0.5s;
          border-radius: 10px;
          margin: 0 3px;
          background: #22252c;
        }

        .transition-200ms {
          transform: translateX(97px);
        }
      }
    }
  }

  .center {
    .center_title {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .right {
    .right_tool {
      display: flex;
      // padding-right: 30px;
      justify-content: flex-end;

      .sousuoxin {
        display: flex;
        margin-right: 10px;
        align-items: center;
        position: relative;

        #sousuoinp {
          // color: rgba(158, 171, 231, 1);

          &::-webkit-input-placeholder {
            /* WebKit browsers */
            // color: rgba(158, 171, 231, 1);
            // background-color: #f9f7f7;
            font-size: 16px;
            padding-left: 10px;
          }
        }

        i {
          color: #cfd0d9;
        }

        .shareTopinp {
          width: 0;
          height: 42px;
          border: none;
          outline: none;
          margin-right: -42px;
          z-index: 3;
          border-radius: 21px;
          transition: all 0.5s ease-in-out;
          background: transparent;
          color: #fff;
        }

        .searchclass {
          width: 42px;
          height: 42px;
          // background: rgb(170, 81, 81);
          border-radius: 21px;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 5;
          transition: all 0.5s;
          box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);

          &:hover {
            // border: 1px solid rgba(243, 243, 255, 1);
            cursor: pointer;
            background-color: #4355dc;
          }
        }

        .searchclass:hover i {
          color: #fff;
        }

        .inpxin {
          width: 200px;
          height: 42px;
          padding: 0 42px 0 10px;
          box-shadow: 0 0 30px 0 rgba(104, 108, 232, 0.1);
        }
      }

      .list_chart {
        width: 42px;
        height: 42px;
        margin: 0 10px;
        // background: rgb(180, 95, 95);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: all 0.3s;
        box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);

        i {
          color: #cfd0d9;
        }

        &:hover {
          background: #4355dc;
          cursor: pointer;

          i {
            color: #fff;
          }

          .toolpaixu {
            display: block;
          }
        }
      }
    }

    .toolpaixu {
      display: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 20px;
      transition: all 0.8s ease-in-out;
      padding-top: 30px;
      width: 120px;
      z-index: 10;

      .toolpaixuul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 4px 20px 0px rgba(87, 98, 253, 0.1);
        padding: 10px;
        border-radius: 10px;
        background-color: #1b1e23;

        .toolpaixuli {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5px 0;

          dd {
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
          }

          &:hover {
            // color: #686CE8;
            cursor: pointer;
            background: #242b3e;
            border-radius: 8px;
          }
        }
      }
    }
  }
}

// 图表
.share_classlist {
  overflow: hidden;
  padding: 0 20px;
  height: calc(100% - 50px);

  ul {
    height: 100%;
    overflow-y: scroll;
    margin: 10px 0;
  }

  li {
    float: left;
    margin: 20px;
    box-sizing: border-box;
    // width: calc(20% - 40px);
    box-shadow: 0 0 30px 0 rgba(47, 50, 134, 0.1);
    border-radius: 16px;
    background: #181a1e;
    transition: 0.3s all ease;
    overflow: hidden;
    text-align: center;
    border: 1px solid #070809;

    &:hover {
      transform: scale(1.05);
      cursor: pointer;
    }

    .box {
      background-size: cover;
      width: 100%;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      background-color: #fff;

      &:hover {

        .view,
        .edit {
          opacity: 1;
        }

        .bianji {
          transform: translate(0, 0);
        }
      }

      .bianji {
        position: absolute;
        top: 0;
        right: 0;
        width: 46px;
        height: 40px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 10px 40px 0px rgba(153, 148, 178, 0.15);
        border-radius: 0px 14px 0px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4355dc;
        font-size: 15px;
        transform: translate(46px, -40px);
        transition: all 0.3s;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        left: 0;
        top: 0;
        border-radius: 16px;
        z-index: 8;
        opacity: 0;
      }

      .view {
        position: absolute;
        right: 65px;
        bottom: 10px;
        display: flex;
        z-index: 9;
        opacity: 0;

        dd {
          width: 30px;
          height: 30px;
          background: #fff;
          border-radius: 8px;
          color: #afacc7;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
          cursor: pointer;
        }
      }

      .edit {
        position: absolute;
        right: 20px;
        bottom: 10px;
        display: flex;
        z-index: 9;
        opacity: 0;

        dd {
          width: 30px;
          height: 30px;
          background: #fff;
          border-radius: 8px;
          color: #afacc7;
          text-align: center;
          line-height: 30px;
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }

    .name_inp {
      text-align: initial;
      height: 44px;
      font-size: 17px;
      line-height: 44px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover .icon-bianji {
        display: block;
      }

      .name_inp_inp {
        background-color: transparent;
        border: none;
        outline: none;
        text-align: center;
        width: 100%;
        height: 35px;
        font-size: 18px;

        &:hover {
          cursor: default;
        }

        &:focus {
          background-color: #fff;
          color: #000;
          // border-radius: 15px;
          // border: none;
          // outline: none;
          box-shadow: 0 8px 20px 0 rgb(47 50 134 / 10%);
          border: 1px solid rgba(122, 132, 255, 1);
          // box-shadow: 0px 10px 30px 0px rgba(122, 132, 255, 0.1);
          border-radius: 8px;
        }
      }

      .inp_span {
        font-size: 18px;
        // margin-left: 10px;
        color: #413a50;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .icon-bianji {
        display: none;
      }
    }
  }
}

// 小人在下面
.head_portrait {
  display: flex;
  position: relative;
  margin-bottom: 10px;

  span {
    width: 32px;
    height: 32px;
    // display: inline-block;
    border-radius: 50%;
    // background-color: red;
    margin-left: -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-right: -25px;
    border: 1px solid #fff;
    transition: all 0.3s;

    img {
      object-fit: scale-down;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    &:nth-child(1) {
      margin-left: 18px;
    }

    &:hover {
      margin-right: 8px;
    }
  }

  .head_mask {
    // position: absolute;
    width: 32px;
    height: 32px;
    font-size: 14px;
    background-color: #f3f5ff;
    border-radius: 50%;
    color: #afacc7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
  }

  // .new_distribution {
  //   position: absolute;
  //   right: 18px;
  //   width: 32px;
  //   height: 32px;
  //   border-radius: 50%;
  //   background: #f3f5ff;
  //   color: #afacc7;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // }
  .yijieshou {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background-color: #fff;
    padding: 4px;
    border-radius: 10px;
    margin-left: 11px;

    &:hover {
      .right {
        width: 80px;
        margin-left: 2px;
      }
    }

    .left {
      width: 28px;
      height: 28px;

      img {
        object-fit: scale-down;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .right {
      transition: all 0.3s;
      width: 0;
      overflow: hidden;
      font-size: 12px;
      text-overflow: ellipsis;
      text-align: left;

      .top,
      .bottom {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.receivelist {
  // width: 210px;

  .listyijieshou {
    // background-color: red;
    display: flex;

    .left {
      width: 28px;
      height: 28px;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .share {
      margin-left: 10px;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 28px;
    }
  }
}

// 小人在图上
.head_imgportrait {
  display: flex;
  margin-bottom: 10px;
  position: absolute;
  bottom: 0;
  z-index: 9;

  span {
    width: 32px;
    height: 32px;
    // display: inline-block;
    border-radius: 50%;
    // background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    transition: all 0.3s;
    margin-left: -8px;

    img {
      object-fit: scale-down;
      width: 100%;
      border-radius: 50%;
    }

    &:nth-child(1) {
      margin-left: 18px;
    }

    &:hover {
      margin-right: 8px;
    }
  }

  .head_mask {
    position: absolute;
    right: -24px;
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 50%;
    background: #f6f8fb;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #7a8bbf;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .new_distribution {
    position: absolute;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f5ff;
    color: #afacc7;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yijieshou {
    position: absolute;
    bottom: 0;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background-color: #fff;
    padding: 4px;
    border-radius: 10px;

    &:hover {
      .right {
        width: 48px;
        margin-left: 2px;
      }
    }

    .left {
      width: 28px;
      height: 28px;

      img {
        object-fit: cover;
        width: 100%;
        border-radius: 50%;
      }
    }

    .right {
      transition: all 0.3s;
      width: 0;
      overflow: hidden;
      font-size: 12px;
      text-overflow: ellipsis;
      text-align: left;

      .top,
      .bottom {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

// 列表
.share_classlist2 {
  overflow-y: scroll;
  height: calc(100% - 50px);

  ul {
    padding: 10px 20px 5px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;

    li {
      display: flex;
      height: 80px;
      align-items: center;
      justify-content: space-between;
      // margin: 0 20px;
      padding: 0 20px;
      transition: all 0.3s ease-in-out;

      .left {
        .box {
          display: flex;
          align-items: center;
          font-size: 18px;

          img {
            width: 63px;
            height: 54px;
            border-radius: 8px;
            margin: 0 20px 0 0;
            cursor: pointer;
            object-fit: cover;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 20px;

        .bianji {
          color: #cfd0d9;
        }

        .bianji:hover {
          cursor: pointer;
          color: #4355dc;
        }
      }

      &:hover {
        height: 80px;
        background: #181a1e;
        box-shadow: 0px 2px 10px 0px rgba(3, 7, 21, 0.21);
        border-radius: 15px;
      }
    }
  }

  .name_inp {
    display: flex;
    align-items: center;
    justify-content: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .name_inp_inp {
      background-color: transparent;
      border: none;
      outline: none;
      text-align: center;
      width: 100%;
      height: 35px;
      font-size: 18px;

      &:hover {
        cursor: default;
      }

      &:focus {
        background-color: #fff;
        color: #000;
        border: 1px solid #7a84ff;
        box-shadow: 0px 10px 30px 0px rgb(122 132 255 / 10%);
        border-radius: 8px;
      }
    }

    .icon-bianji {
      display: none;
    }

    &:hover {
      .icon-bianji {
        display: block;
      }
    }

    .inp_span {
      font-size: 18px;
      color: #ffffff;
      transition: all 0.2s;
      padding: 0 10px;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .left,
  .center {
    width: 33.33%;
  }

  // .right {}

  .center {
    // display: flex;
    align-items: center;
    justify-content: center;
  }

  .head_portrait {
    // display: flex;
    position: relative;

    .sharelist {
      display: flex;
      width: 180px;
    }

    span {
      width: 32px;
      height: 32px;
      // display: inline-block;
      border-radius: 50%;
      // background-color: red;
      // margin-left: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      // margin-right: -25px;
      border: 1px solid #fff;
      transition: all 0.3s;
    }

    .head_mask {
      // position: absolute;
      // left: 15px;
      width: 32px;
      height: 32px;
      font-size: 14px;
      // background-color: rgba(221, 191, 191, 0.3);
      background: #f6f8fb;
      border: 1px solid rgba(255, 255, 255, 0.6);
      color: #7a8bbf;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .right {
    .list_right {
      display: flex;
      justify-content: flex-end;

      .view {
        margin: 0 40px;
      }

      .view:hover {
        color: #686ce8;
      }

      .edit:hover {
        color: #686ce8;
      }
    }
  }
}

.sharenone {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #7a8bbf;
  letter-spacing: 0;
}
</style>
<style lang="scss" scoped>
.multiple_select {
  border: 1px solid #7a84ff;
}

.aaa {
  position: absolute;
  right: 0;
}
</style>
<style lang="scss">
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}
</style>
